<template>
  <div class="fundBox">
    <div class="fundTitle">资金用途</div>
    <div class="cenBox">
      <div class="fundShow">
        <div class="column1 col">
          <div class="percent">44%</div>
          <div class="useWay">举办 活动</div>
        </div>
        <div class="column2 col">
          <div class="percent">17%</div>
          <div class="useWay">课程教材研发</div>
        </div>
        <div class="column3 col">
          <div class="percent">14%</div>
          <div class="useWay">宣传 支出</div>
        </div>
        <div class="column4 col">
          <div class="percent">11%</div>
          <div class="useWay">专家 咨询</div>
        </div>
        <div class="column5 col">
          <div class="percent">8%</div>
          <div class="useWay">团队 培训</div>
        </div>
        <div class="column6 col">
          <div class="percent">6%</div>
          <div class="useWay">开发 维护</div>
        </div>
      </div>
      <div class="fundChart" ref="fund_use"></div>
    </div>
    <div class="fundFoot"></div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      chartInstance: null,
      allData: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 初始化实例对象
    initChart() {
      this.chartInstance = this.$ECharts.init(this.$refs.fund_use)
      this.getData()
    },
    // 获取服务器的数据
    getData() {
      // const {data:ret} = await this.$http.get('')
      // this.allData = ret
      console.log(1312)
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      console.log(1312)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '资金用途 <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            // radius: [10, 65],
            center: ['40%', '50%'],
            roseType: 'radius',
            radius:[40,80],
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            color: [
              '#d57759',
              '#ff6567',
              '#79a82f',
              '#3b84ab',
              '#424dac',
              '#2e3b7a'
            ],
            data: [
              { value: 36, name: '举办活动' },
              { value: 25, name: '课程教材研发' },
              { value: 14, name: '宣传支出' },
              { value: 11, name: '专家咨询' },
              { value: 8, name: '团队培训' },
              { value: 6, name: '开发维护' }
            ]
          }
        ]
      }
      console.log(122)
      this.chartInstance.setOption(option)
      console.log(122)
    }
  }
}
</script>
<style lang="less" scoped>
.fundBox {
  position: relative;
  margin-top: 0.1875rem;
  margin-bottom: 0.15rem;
  height: 35vh;
  background-color: rgba(137, 2, 2, 0.32);
  border: 1px solid rgb(255, 0, 14);
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 10px;
    height: 10px;
    border-left: 2px solid rgb(227, 93, 28);
    border-top: 2px solid rgb(255, 225, 123);
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid rgb(255, 225, 123);
    border-top: 2px solid rgb(227, 93, 28);
  }
  .fundFoot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      content: '';
      width: 10px;
      height: 10px;
      border-right: 2px solid rgb(227, 93, 28);
      border-bottom: 2px solid rgb(255, 225, 123);
    }
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      width: 10px;
      height: 10px;
      border-left: 2px solid rgb(255, 225, 123);
      border-bottom: 2px solid rgb(227, 93, 28);
    }
  }
  .fundTitle {
    color: #fff;
    font-size: 0.375rem;
    font-weight: 900;
    font-family: monospace;
    background-color: rgb(177, 1, 1);
    height: 0.625rem;
    line-height: 0.625rem;
    padding-left: 0.25rem;
  }
  .cenBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .fundShow {
      flex: 1;
      padding-left: 20px;
      display: grid;
      grid-template-columns: 0.9rem 0.9rem;
      gap: 0.125rem;
      align-items: center;
      justify-items: center;
      .useWay {
        font-size: 12px;
      }
      .percent {
        font-size: 15px;
      }
      .column1 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #f6a788;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .column2 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #f5d858;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .column3 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #8aed3d;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .column4 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #57ceff;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .column5 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #9ddefb;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .column6 {
        display: flex;
        flex-direction: column;
        .percent {
          color: #8da0f0;
        }
        .useWay {
          display: flex;
          flex-direction: row;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
    .fundChart {
      flex: 3;
      height: 3.7rem;
      margin-top: 0.25rem;
    }
  }
}
</style>
